<div tabindex="-1" class="boxmodel-editor">
    <header>
        <label>{{BOX_MODEL_HEADER}}</label>
        <ul class="button-bar">
          <li id="allSides" title="{{ALL_SIDES}}">
              <a href="#" tabindex="0">{{ALL_SIDES}}</a>
          </li>
          <li title="{{INDIVIDUAL_SIDES}}" disabled="true" id="individualSides">
              <a href="#" tabindex="0">{{INDIVIDUAL_SIDES}}</a>
          </li>
        </ul>
    </header>

    <div id="individualSidesArea">

        <table>
            <tr class="boxmodel-input">
                <td class="label-container">
                    <div class="top {{box-model-icon-class-name}}"></div>
                    <!-- Top left -->
                </td>
                <td class="slider-container">
                   <input id="top-slider" type="range" min="0" max="100" step="1">
                </td>
                <td class="slider-value">
                   <span class="slider-indicator" id="top-text"></span>
                </td>
                <td class="units-container">
                    <ul class="button-bar ul-boxmodel-left" id="top-radio">
                        <li id="top-radio-px" title="{{PIXEL_UNIT}}"><a href="#" tabindex="0">px</a></li>
                        <li title="{{PERCENTAGE_UNIT}}" disabled="true" id="top-radio-percent"><a href="#" tabindex="0">%</a></li>
                        <li title="{{EM_UNIT}}" disabled="true" id="top-radio-em"><a href="#" tabindex="0">em</a></li>
                    </ul>
                </td>
            </tr>

            <tr class="boxmodel-input">
                <td class="label-container">
                    <div class="right {{box-model-icon-class-name}}"></div>
                    <!-- Top right -->
                </td>
                <td class="slider-container">
                    <input id="right-slider" type="range" min="0" max="100" step="1">
                </td>
                <td>
                    <span class="slider-indicator" id="right-text"></span>
                </td>
                <td class="units-container">
                    <ul class="button-bar ul-boxmodel-left" id="right-radio">
                        <li id="right-radio-px" title="{{PIXEL_UNIT}}"><a href="#" tabindex="0">px</a></li>
                        <li title="{{PERCENTAGE_UNIT}}" disabled="true" id="right-radio-percent"><a href="#" tabindex="0">%</a></li>
                        <li title="{{EM_UNIT}}" disabled="true" id="right-radio-em"><a href="#" tabindex="0">em</a></li>
                    </ul>
                </td>
            </tr>

            <tr class="boxmodel-input">
                <td class="label-container">
                    <div class="bottom {{box-model-icon-class-name}}"></div>
                    <!-- Bottom right -->
                </td>
                <td class="slider-container">
                   <input id="bottom-slider" type="range" min="0" max="100" step="1">
                </td>
                <td>
                   <span class="slider-indicator" id="bottom-text"></span>
                </td>
                <td class="units-container">
                   <ul class="button-bar ul-boxmodel-left" id="bottom-radio">
                       <li id="bottom-radio-px" title="{{PIXEL_UNIT}}"><a href="#" tabindex="0">px</a></li>
                       <li title="{{PERCENTAGE_UNIT}}" disabled="true" id="bottom-radio-percent"><a href="#" tabindex="0">%</a></li>
                       <li title="{{EM_UNIT}}" disabled="true" id="bottom-radio-em"><a href="#" tabindex="0">em</a></li>
                   </ul>
                </td>
            </tr>

            <tr class="boxmodel-input">
                <td class="label-container">
                    <div class="left {{box-model-icon-class-name}}"></div>
                    <!-- Bottom left -->
                </td>
                <td class="slider-container">
                    <input id="left-slider" type="range" min="0" max="100" step="1">
                </td>
                <td>
                    <span class="slider-indicator" id="left-text"></span>
                </td>
                <td class="units-container">
                    <ul class="button-bar ul-boxmodel-left" id="left-radio">
                        <li id="left-radio-px" title="{{PIXEL_UNIT}}"><a href="#" tabindex="0">px</a></li>
                        <li title="{{PERCENTAGE_UNIT}}" disabled="true" id="left-radio-percent"><a href="#" tabindex="0">%</a></li>
                        <li title="{{EM_UNIT}}" disabled="true" id="left-radio-em"><a href="#" tabindex="0">em</a></li>
                    </ul>
                </td>
            </tr>
        </table>
    </div>

    <div id="allSidesArea">
       <table>
           <tr class="boxmodel-input">
               <td class="label-container">All sides</td>
               <td class="slider-container">
                   <input id="all-sides-slider" type="range" min="0" max="100" step="1">
               </td>
               <td class="slider-value">
                  <span class="slider-indicator" id="all-sides-text"></span>
               </td>
               <td class="units-container">
                    <ul class="button-bar ul-boxmodel-left" id="all-sides-radio">
                        <li id="all-sides-radio-px" title="{{PIXEL_UNIT}}"><a href="#" tabindex="0">px</a></li>
                        <li title="{{PERCENTAGE_UNIT}}" disabled="true" id="all-sides-radio-percent"><a href="#" tabindex="0">%</a></li>
                        <li title="{{EM_UNIT}}" disabled="true" id="all-sides-radio-em"><a href="#" tabindex="0">em</a></li>
                    </ul>
               </td>
           </tr>
       </table>
    <div>
</div>

